@import "./helper.scss";

.mock-statebar {
  width: 100%;
  height: rem(45);
  background-color: #000;
}

.banner {
  padding: 0 rem(10);
}

.xh-container {
  width: 100%;
  height: 100%;
  max-width: rem(640);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  background-color: transparent;
  display: -webkit-box;
  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box;
  /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox;
  /* 混合版本语法: IE 10 */
  display: -webkit-flex;
  /* 新版本语法: Chrome 21+ */
  display: flex;
  /* 新版本语法: Opera 12.1, Firefox 22+ */

}

.xh-main {
  width: 100%;
  flex: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  overflow: auto;
}

.xh-pages {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
}

.xh-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  flex: 1;
  width: 100%;
  background-color: #221d65;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  height: 0;

  // transition: opacity 1.5s;
  &.active {
    opacity: 1;
    height: 100%;
  }

  &.home-page {
    background-image: url('../images/bg2.png');
  }

  &.bg {
    background-image: url('../images/bg.png');
  }

  &.bg3 {
    background-image: url('../images/bg3.png');
  }
}


.navbar {
  width: 100%;
  height: rem(44);
  line-height: rem(44);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #110f51;
  color: #fff;
  position: relative;

  &-icon {
    display: block;
    font-family: "iconfont" !important;
    font-size: rem(22);
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0 rem(12);
    position: absolute;
    left: 0;

    &:before {
      content: "\e616";
    }
  }

  &-title {
    flex: 1;
    text-align: center;
    font-size: rem(16);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 rem(50);
  }

  &-more {
    font-size: rem(12);
    padding: 0 rem(12);
    position: absolute;
    right: 0;
  }
}

.home-swiper {

  .swiper-wrapper {
    height: rem(110);
  }

  .swiper-slide {
    background-size: 100% 100%;
  }

  .swiper-pagination {
    &-bullet {
      width: rem(12);
      height: rem(12);
      opacity: 1;
      border: rem(2) solid #fff;

      &-active {
        background-color: #555555;
      }
    }
  }
}

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 rem(12) rem(15);

  &-item,
  &-link {
    text-align: center;
    color: #fff;
    flex: 1;
  }

  &-link {
    display: inline-block;
    color: #fff;
    padding: rem(6) rem(10);
  }

  &-icon {
    width: rem(44);
    height: rem(44);
    margin: rem(6) auto rem(10);
    background-size: rem(44);
    background-repeat: no-repeat;
    background-position: center;

    &-01 {
      background-image: url('../images/menu1.png');
    }

    &-02 {
      background-image: url('../images/menu2.png');
    }

    &-03 {
      background-image: url('../images/menu3.png');
    }

    &-04 {
      background-image: url('../images/menu4.png');
    }
    &-05 {
      background-image: url('../images/menu5.png');
    }
  }

  &-text {
    font-size: rem(12);
  }
}

.eli {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice {
  color: #fff;
  height: rem(29);
  line-height: rem(29);
  background: url('../images/notice.png') no-repeat;
  background-size: 100% 100%;
  font-size: rem(12);
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  &-icon {
    background: url('../images/icon-notice.png') no-repeat center;
    width: rem(19);
    height: 100%;
    background-size: rem(19);
    margin: 0 rem(4) 0 rem(12);
  }

  &-content {
    flex: 1;
    width: 100%;
    overflow: hidden;
    padding-top: rem(2);
  }

  &-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: rem(29);
  }

  &-detail {
    padding: rem(10) rem(12);
    min-height: rem(200);
    word-break: break-all;
  }

  &-more {
    padding: 0 rem(12);
    padding-top: rem(2);
  }
}

.notices {
  margin-top: rem(20);
}

.notice-media {
  margin: 0 rem(12) rem(6);
  padding: rem(6) rem(10) rem(6);
  border-radius: rem(4);
  background-color: #110f51;
  color: #fff;
  display: block;

  .media {
    &-pic {
      width: 100%;
      height: rem(106);
      border-radius: rem(20) rem(20) 0 0;
      overflow: hidden;
    }

    &-content {
      padding: rem(5);
      display: flex;
      align-items: center;
      justify-content: baseline;
    }
  }

  .notice {
    &-info {
      flex: 1;
      overflow: hidden;
    }

    &-name {
      font-size: rem(16);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-date {
      font-size: rem(10);
      line-height: rem(20);
      color: #b4b3c1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-button {
      font-size: rem(12);
      border-radius: rem(12);
      border: 1px solid #ffcf1b;
      color: #ffcf1b;
      padding: rem(4) rem(10);
    }
  }
}

.flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  &-item {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden;
  }
}

.chunk {
  padding: rem(6);

  &-item {
    margin: rem(6);
  }

  &-link {
    display: block;
    color: #fff;
    font-size: rem(14);
    text-align: center;
    background-color: #110f51;
    border-radius: rem(6);
    padding: rem(10);
  }

  &-icon {
    width: rem(64);
    height: rem(64);
    background-size: rem(50);
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    @for $i from 1 through 9 {
      &-0#{$i} {
        background-image: url('../images/chun#{$i}.png');
      }
      &-2#{$i} {
        background-image: url('../images/chun2#{$i}.png');
      }
    };
  }

  &-text {
    font-size: rem(14);
  }
}

.w-100 {
  width: 100%;
}

.media {
  display: flex;
  align-items: center;

  &-content {
    flex: 1;
    overflow: hidden;
  }
}

.bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.customer-service {
  border: 2px solid #e6b915;
  border-radius: rem(50);
  padding: rem(20);
  background-color: #110f51;
  color: #fff;
  font-size: rem(12);
  max-width: rem(315);
  margin: rem(15) auto;

  .media-pic {
    width: rem(36);
    height: rem(36);
    margin: 0 rem(10) 0 0;
    background-image: url('../images/icon-customerservice.png');
  }
}


.jumbotron {
  padding: rem(25) rem(10) rem(25) rem(25);
  background-color: #2829bf;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  font-size: rem(16);

  .label {
    margin-left: rem(10);
  }

  .media {
    &-pic { 
      width: rem(72);
      height: rem(72);
      border-radius: 50%;
      overflow: hidden;
      margin-right: rem(30);
    }

    &-content {
      line-height: rem(30);
    }
  }
}

.btn {
  color: #000;
  background-color: #e6b915;
  text-align: center;

  &-sm {
    font-size: rem(12);
    height: rem(20);
    line-height: rem(19);
    border-radius: rem(10);
    padding: 0 rem(6);
  }

  &-md {
    font-size: rem(15);
    height: rem(30);
    line-height: rem(30);
    border-radius: rem(16);
    padding: 0 rem(10);
    min-width: rem(90);
  }
}

.margin {
  &-auto {
    margin-left: auto;
    margin-right: auto;
  }
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.primary-btn {
  color: #ffcf1b;
  border: 1px solid #ffcf1b;
  background-color: transparent;
}

.info-btn {
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
}

.color {
  &-orange {
    color: #fac201 !important;
  }

  &-gray {
    color: #c4c4c4 !important;
  }

  &-success {
    color: #00ff60 !important;
  }
  &-warn {
    color: #ff1414 !important;
  }
}

.tabbar {
  display: flex;
  width: 100%;
  height: rem(56);
  align-items: center;
  text-align: center;
  background-color: #110f51;
  border-top: rem(0.5) solid rgba(255,255,255,0.6);

  &-item {
    flex: 1;
    color: #8887a8;

    &.active {
      color: #e7ba16;

      .tabbar-icon {
        &-01 {
          background-image: url('../images/tabbar1-active.png');
        }

        &-02 {
          background-image: url('../images/tabbar2-active.png');
        }

        &-03 {
          background-image: url('../images/tabbar3-active.png');
        }
        &-04 {
          background-image: url('../images/tabbar4-active.png');
        }
      }
    }
  }

  &-icon {
    width: rem(24);
    height: rem(24);
    margin: 0 auto rem(1);
    background-size: rem(20);
    background-repeat: no-repeat;
    background-position: center;

    &-01 {
      background-image: url('../images/tabbar1.png');
    }

    &-02 {
      background-image: url('../images/tabbar2.png');
    }

    &-03 {
      background-image: url('../images/tabbar3.png');
    }
    &-04 {
      background-image: url('../images/tabbar4.png');
    }
  }

  &-text {
    font-size: rem(12);
  }
}


.label {
  display: inline-block;
  border: 1px solid #ffcf1b;
  color: #ffcf1b;
  border-radius: rem(10);
  font-size: rem(12);
  padding: rem(6) rem(6);
  background-color: transparent;
  margin: 0 rem(5);
  line-height: 1;
}


.assets {
  display: flex;
  align-items: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: rem(10) rem(12);

  &-item {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden;
  }

  &-item {
    flex: 1;
    color: #fff;
    text-align: center;
    border-radius: rem(16);
    background-color: #110f51;

    &.left {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &.center {
      border-radius: 0 0 0 0;
      border-right: 1px solid #8685a6;
      border-left: 1px solid #8685a6;
    }

    &.right {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  &-link {
    display: block;
    padding: rem(10);
    overflow: hidden;
  }

  &-val {
    color: #fff;
    font-size: rem(20);
    line-height: rem(36);
  }

  &-text {
    font-size: rem(12);
    line-height: rem(24);
  }
}

.my-jumbotron {
  background-image: url('../images/my-jumbotron.png');
}

.my-banner {
  margin-top: rem(-15);
  margin-bottom: rem(-10);
}

.my-chunk {
  .chunk {
    &-link {
      display: flex;
      padding: rem(10) rem(6);
      align-items: center;
    }

    &-icon {
      text-align: left;
      width: rem(50);
      height: rem(50);
      background-size: rem(40);
      margin-right: rem(10);

      &-01 {
        background-image: url(../images/my1.png);
      }

      &-02 {
        background-image: url(../images/my2.png);
      }

      &-03 {
        background-image: url(../images/my3.png);
      }

      &-04 {
        background-image: url(../images/my4.png);
      }

      &-05 {
        background-image: url(../images/my5.png);
      }

      &-06 {
        background-image: url(../images/my6.png);
      }

      &-07 {
        background-image: url(../images/my7.png);
      }

      &-08 {
        background-image: url(../images/my8.png);
      }

      &-09 {
        background-image: url(../images/my9.png);
      }

      &-10 {
        background-image: url(../images/my10.png);
      }
    }

    &-text {
      text-align: left;
      flex: 1;
      overflow: hidden;

      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

// 问题
.questions {
  padding: rem(10) rem(16);
}

.question {
  background-color: #110f51;
  color: #fff;
  margin-bottom: rem(6);
  padding: rem(12) rem(20);
  border-radius: rem(6);
  font-size: rem(12);
  display: block;

  &_link {
    position: relative;

    &:after {
      position: absolute;
      right: rem(10);
      content: "\e616";
      font-family: "iconfont" !important;
      font-size: rem(16);
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transform: rotate(180deg);
    }
  }
}

.cards {
  display: none;

  &.active {
    display: block;
  }
}

.card {
  margin: rem(20) rem(12);
  background-color: rgba(17, 15, 81, 1);
  padding: rem(20) rem(20);
  color: #fff;
  border-radius: rem(20);

  &-header {
    margin-bottom: rem(13);
    border-bottom: 1px solid #8f8ead;
    .card-line {
      margin-bottom: rem(10);
    }
  }

  &-title {
    font-size: rem(17);
    line-height: rem(17);
    padding-bottom: rem(20);
  }

  &-line {
    font-size: rem(15);
    line-height: rem(18);
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-bottom: rem(16);

    &.font-sm {
      font-size: rem(12);
      line-height: rem(12);
      margin-bottom: rem(6);
    }
  }

  &-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 rem(16) 0 rem(2);
  }

  &-qr {
    width: rem(64);
    height: rem(64);
  }

  &-footer {
    padding-top: rem(8);
  }

  &-handler {
    display: flex;

    .btn {
      width: 100%;
      padding: rem(10);
      text-align: center;
    }
  }
}

.small {
  font-size: 90%;
}

.no {
  &-padding {
    padding: 0 !important;
  }

  &-margin {
    margin: 0 !important;
  }
}

.font {
  &-sm {
    font-size: rem(12);
  }

  &-md {
    font-size: rem(16) !important;
  }
}

.m {
  padding: rem(10) rem(20);
}

.card-tabbar {
  display: flex;

  .tabbar-item {
    color: #fff;
    font-size: rem(17);
    line-height: rem(34);
    text-align: center;
    flex: 1;
    border-bottom: 1px solid #fff;

    &.active {
      color: #ffcf1b;
      border-bottom: 4px solid #ffcf1b;
    }
  }
}

.no-card {
  height: rem(300);
  margin: rem(36) rem(24);
  color: #fff;
  font-size: rem(20);
  text-align: center;
  padding: rem(20);
  background-color: #110f51;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .card-icon {
    width: rem(150);
    text-align: center;
    margin: 0 auto rem(20);
    font-size: rem(72);
    color: #ffcf1b;
  }

  .card-text {
    text-align: center;
    padding: 0;
    color: #f2f2f2;
  }
}

.ipt {
  border: 1px solid #ccc;
  outline: none;
  background-color: #ffffff;
  padding: rem(7) rem(14);
  border-radius: rem(12);
  font-size: rem(12);
  height: auto;

  &-sm {
    padding: rem(4) rem(10);
    border-radius: rem(3);
  }
}

.textarea {
  border-radius: rem(5);
}

// 支付卡片
.pay-card {
  margin: rem(20) rem(22) rem(16);
  // max-width: rem(354);
  height: rem(90);
  padding-right: rem(16);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: rem(4);
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: rem(12);
  line-height: rem(20);
  &.active {
    border: rem(2) solid #fff;
  }

  &-icon {
    width: rem(64);
    height: rem(64);
    margin: 0 rem(20) 0 rem(12);
    background-size: cover;

    &.weixin {
      background-image: url('../images/icon-wechat.png');
    }

    &.alipay {
      background-image: url('../images/icon-alipay.png');
    }
    &.bank {
      background-image: url('../images/icon-paycard.png');
    }
    &.cep {
      background-image: url('../images/icon-cep.png');
    }
  }

  &.weixin {
    background-color: #009f3c;
  }

  &.alipay {
    background-color: #007aff;
  }
  
  &.bank {
    background-color: #272636;
  }

  &.cep {
    background-color: #110f51;
  }
}

.complaint-card {
  padding-bottom: rem(12);
  border-radius: rem(8);
  margin: rem(10) rem(12);
}

.card-ipt {
  &.reverse {
    background-color: transparent;
    color: #fff;

    &::placeholder {
      color: rgba(255, 255, 255, .6);
    }
  }
}

.review-card {
  .card-ipt {
    width: rem(232);
  }

  .no-card {
    height: rem(200);

    .card-icon {
      margin-bottom: rem(12);
    }
  }

  .card-handler {
    margin-top: rem(12);
  }
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #b4b3c1;
}


.search-btn {
  min-width: rem(54);
  height: rem(25);
  outline: none;
  border: none;
  background-color: #fff;
  border-radius: rem(16);
  color: #221d65;
}

.review-upgrade-button {
  width: rem(270);
  height: rem(44);
  line-height: rem(44);
  text-align: center;
  font-size: rem(16);
  margin: rem(50) auto;
  border-radius: rem(6);
}

.team {
  margin: rem(15) rem(12);
  padding: rem(6) rem(12);
  border-radius: rem(20);
  background-color: #110f51;
  height: rem(720);
  color: #fff;
  overflow: auto;

  &-tabbar {
    display: flex;
    text-align: center;
    border-bottom: 1px solid #ffcf1b;

    .tabbar-item {
      color: #fff;
      font-size: rem(14);
      line-height: rem(20);
      padding: rem(6);

      &+.tabbar-item {
        position: relative;

        &:after {
          content: "";
          position: absolute;
          width: 1px;
          height: 80%;
          left: 0;
          top: 10%;
          background-color: #ffcf1b;
        }
      }
    }
  }

  &-content {
    padding-bottom: rem(60);
  }

  &-list {
    font-size: rem(16);
    line-height: rem(32);

    &-item {
      border-bottom: 1px solid #6d6c95;
      padding-top: rem(12);
      padding-bottom: rem(2);
      overflow: hidden;
    }
  }
}

.tearn-member {
  padding: 0 rem(12);

  &-pic {
    width: rem(72);
    height: rem(72);
    border-radius: 50%;
    overflow: hidden;
    background-image: url('../images/pic1.jpg');
    margin-bottom: rem(5);
  }

  &-id {
    font-size: rem(16);
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tearn-card {
  padding: rem(20) rem(12);
  margin: rem(15) rem(12);
  border-radius: rem(20);

  .card-line {
    margin-top: rem(10);
    margin-bottom: rem(10);
    font-size: rem(14);
  }
}

// 矿机
.mining-pic {
  width: rem(75);
  height: rem(75);
}

.mining {
  &-pic {
    background-size: contain;
  }

  &-card {
    padding: rem(20) rem(25) rem(20);
    border-radius: rem(10);

    .card-content {
      padding-left: rem(25);
    }

    .card-line {
      font-size: rem(14);
      margin-top: rem(12);
      margin-bottom: rem(12);
    }
  }

  &-name {
    font-size: rem(12);
    text-align: center;
    line-height: rem(24);
  }
}

.pt {
  &-1 {
    padding-top: rem(5);
  }

  &-2 {
    padding-top: rem(10);
  }
}

.pb {
  &-1 {
    padding-bottom: rem(5);
  }

  &-2 {
    padding-bottom: rem(10);
  }

  &-3 {
    padding-bottom: rem(20);
  }
}

.pl {
  &-1 {
    padding-left: rem(5);
  }

  &-2 {
    padding-left: rem(10);
  }

  &-3 {
    padding-left: rem(20);
  }
}

.pr {
  &-1 {
    padding-right: rem(5);
  }

  &-2 {
    padding-right: rem(10);
  }

  &-3 {
    padding-right: rem(20);
  }
}

.mb {
  &-1 {
    margin-bottom: rem(5);
  }
  &-2 {
    margin-bottom: rem(10);
  }
  &-3 {
    margin-bottom: rem(20);
  }
}

.mt {
  &-1 {
    margin-top: rem(5);
  }

  &-2 {
    margin-top: rem(10);
  }

  &-3 {
    margin-top: rem(20);
  }
}

.mr {
  &-1 {
    margin-right: rem(5);
  }

  &-2 {
    margin-right: rem(10);
  }

  &-3 {
    margin-right: rem(20);
  }
}

.rank {
  &-tabbar {
    width: rem(150);
    height: rem(30);
    line-height: rem(27);
    border: rem(2) solid #ffcf1b;
    color: #221d65;
    background-color: #ffcf1b;
    display: flex;
    border-radius: rem(8);
    overflow: hidden;
    text-align: center;
    margin: 0 auto rem(16);

    &-item {
      flex: 1;
      color: #221d65;

      &.active {
        color: #ffcf1b;
        background-color: #221d65;
      }
    }
  }

  &-container {
    display: none;

    &.active {
      display: block;
    }
  }

  &-date {
    text-align: right;
    padding: 0 rem(10);

    &-item {
      color: #a2a2a2;
      display: inline-block;
      padding: 0 rem(10);

      &.active {
        color: #fff;
      }
    }
  }

  &-table {
    margin-top: rem(24);
    width: 100%;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    font-size: rem(13);

    .small {
      font-size: rem(9);
    }

    th {
      line-height: rem(26);
      padding-bottom: rem(12);
      text-align: center;
    }

    tbody {
      tr {
        border-bottom: 1px solid #a7a5c1;

        td {
          padding-top: rem(6);
          padding-bottom: rem(8);
        }

        .rank-medal {
          margin: 0 0 0 rem(5);
        }

        &:nth-child(1) {
          .rank-medal {
            background-image: url('../images/rank1.png');
          }
        }

        &:nth-child(2) {
          .rank-medal {
            background-image: url('../images/rank2.png');
          }
        }

        &:nth-child(3) {
          .rank-medal {
            background-image: url('../images/rank3.png');
          }
        }
      }
    }
  }

  &-avatar {
    width: rem(24);
    height: rem(24);
    border: rem(1) solid #ffcf1b;
    border-radius: 50%;
  }

  &-medal {
    display: inline-block;
    width: rem(12);
    height: rem(18);
  }
}

.box {
  margin: rem(12) rem(12) rem(20);
  background-color: #110f51;
  border-radius: rem(6);
}

.pl-0 {
  padding-left: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.ml {
  &-2 {
    margin-left: rem(10);
  }

  &-3 {
    margin-left: rem(20);
  }
}

.userinfo {
  text-align: center;

  &-avatar {
    width: rem(105);
    height: rem(105);
    margin: 0 auto rem(12);
  }

  &-text {
    font-size: rem(14);
    line-height: rem(14);
    margin-bottom: rem(10);
  }
}

.toUpgrade {
  &-userinfo {
    margin: rem(32) auto rem(14);
  }
}

.vipup-card {
  width: rem(240);
  padding: rem(10) rem(15);
  border-radius: rem(12);
  margin: rem(24) auto rem(16);
  &-title {
    position: relative;
    font-size: rem(16);
    text-align: center;
    color: #ffcf1b;
    margin: rem(12) auto rem(19);
  }

  &-content {
    margin-top: rem(12);
    margin-bottom: rem(42);
    & + & {
    }
  }

  &-dl {
    font-size: rem(12);
    line-height: rem(12);
    margin-bottom: rem(16);
    display: flex;
  }

  &-dt {
    width: rem(120);
    text-align: right;
  }
}



.drange-button {
  color: #fff;
  background-color: #ff4d4d;
  font-size: rem(16);
  padding: rem(12) rem(100);
  display: inline-block;
  border-radius: rem(6);
  outline: none;
  border: none;
}

.invite {
  &-box {
    padding: rem(20) rem(24);
  }

  &-title {
    font-size: rem(14);
  }

  &-qr {
    width: rem(122);
    height: rem(122);
    margin: rem(32) auto rem(56);
    background-color: #fff;
    padding: rem(6);
    overflow: hidden;
    img {
      max-width: 100%;
      width: 100%;
      height: 100%;
    }
  }

  &-link {
    font-size: rem(16);
    line-height: rem(20);
    word-break: normal;
    word-break:break-all;
    font-size: rem(12);
  }

  &-footer {
    text-align: center;
    margin: rem(60) auto rem(20);
  }
}

.weui-gallery {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
  z-index: 1000;

  &__img {
    position: absolute;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    right: constant(safe-area-inset-right);
    right: env(safe-area-inset-right);
    bottom: calc(60px + constant(safe-area-inset-bottom));
    bottom: calc(60px + env(safe-area-inset-bottom));
    left: constant(safe-area-inset-left);
    left: env(safe-area-inset-left);
    background: center center no-repeat;
    background-size: contain;
  }

  &__opr {
    position: absolute;
    right: constant(safe-area-inset-right);
    right: env(safe-area-inset-right);
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    left: constant(safe-area-inset-left);
    left: env(safe-area-inset-left);
    background-color: #0D0D0D;
    color: #FFFFFF;
    line-height: 60px;
    text-align: center;
  }
}

.weui-icon {
  &-close {
    font-size: rem(24);
  }
}


.row {
  margin-left: rem(-8);
  margin-right: rem(-8);

  .flex-item {
    margin: 0 rem(8);
  }
}


.ipt {
  height: auto;
  margin-bottom: 0;
  width: 100%;
}

.upload_pic {
  width: rem(58);
  height: rem(58);
  position: relative;
}

.form {
  padding: rem(20) rem(16);

  &-label {
    font-size: rem(12);
    margin-bottom: rem(12);
  }

  &-line {
    margin-bottom: rem(20);
  }

  &-code {
    width: rem(100);
    height: rem(32);
    background-color: #fff;
    overflow: hidden;
    border-radius: rem(6);
    padding: 0 rem(6);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
  }

  &-ipt+&-code {
    margin-left: rem(20);
  }

  &-msg {
    margin-top: rem(8);
    color: #c4c4c4;
    font-size: rem(12);
  }
}

.complaint-form {
  width: rem(320);

  .complaint-line {
    margin-bottom: rem(29);
  }

  .upload-line {
    margin-bottom: rem(12);
  }

  .special-line {
    margin-bottom: rem(16);
  }
}

.text-sm {
  font-size: rem(12);
  line-height: rem(18);
}

.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: rem(6);
  margin-bottom: rem(6);
  width: rem(64);
  height: rem(64);
  box-sizing: border-box;
  background-color: #EDEDED;

  &:before,
  &:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #A3A3A3;
  }

  &:before {
    width: 2px;
    height: 32px;
  }

  &:after {
    width: 32px;
    height: 2px;
  }
}

.weui-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.weui-uploader__file {
  float: left;
  margin-right: rem(6);
  margin-bottom: rem(6);
  width: 100%;
  height: 100%;
  background: no-repeat center center;
  background-size: cover;
  position: relative;
}

.clearfix {
  overflow: auto;
  _height: 1%
}


.submit-button {
  color: #000;
  background-color:#e0133c;
  font-size: rem(16);
  padding: rem(12) rem(15);
  display: inline-block;
  border-radius: rem(6);
  outline: none;
  border: none;
  max-width: 100%;
  text-align: center;
  color: #fff;
  cursor: pointer;
  &-lg {
    width: rem(268);
  }
}

.forget-form {
  .form {
    &-line {
      margin-bottom: rem(16);
    }

    &-label {
      font-size: rem(16);
      margin-bottom: rem(8);
    }

    &-ipt {
      padding: rem(6) rem(12);
      border-radius: rem(4);
    }
  }

  .submit-button {
    margin-top: rem(10);
  }
}

.code-btn {
  width: rem(80);
  height: rem(26);
  outline: none;
  border: none;
  border-radius: rem(30);
  background-color: #fff;
  font-size: rem(12);
}

.form-ipt {
  border-radius: rem(6);
}

.login {

  &-box {
    max-width: rem(300);
    margin: rem(56) auto rem(0);
  }
  &-logo {
    margin-bottom: rem(20);
    &-pic {
      width: rem(160);
      height: rem(80);
      margin: 0 auto;
      background-image: url('../images/avatar.png');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    &-text {
      font-size: rem(16);
      text-align: center;
      color: #ffcf1b;
    }
  }
}

.register {
  &-box {
    margin: rem(20) rem(12);
    padding: rem(20);
  }

  &-logo {
    &-pic {
      width: rem(56);
      height: rem(56);
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto rem(20);
      background-color: #fff;
      border: rem(4) solid #ffcf1b;
      background-image: url('../images/usesrinfo-avatar.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
}

.form {
  .submit-button {
    min-width: rem(240);
  }
}

.personal {
  &-form {
    padding-top: rem(40);

    .upload-avatar {
      margin-bottom: rem(47);
    }

    .form-line {
      margin-bottom: rem(15);
    }

    .form-label {
      margin-bottom: 0;
      text-align: right;
      margin-right: rem(12);
    }

    .form-ipt {
      border-radius: rem(4);
    }

    .submit-button {
      margin: rem(32) auto rem(24);
    }
  }

  &-logo {
    &-pic {
      border: none;
      width: rem(150);
      height: rem(150);
      background-image: url('../images/uploadAvatar.png');
      position: relative;

      &:after {
        content: "点击更换头像";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: rem(30);
        line-height: rem(30);
        z-index: 1000;
        text-align: center;
        background-color: rgba(0, 0, 0, 1);
      }
    }
  }
}

.m-title {
  &-1 {
    display: inline-block;
    position: relative;
    padding: 0 rem(50);

    &:before,
    &:after {
      content: "";
      position: absolute;
      background-image: url('../images/m-title-1.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      width: rem(76);
      height: rem(16);
      top: 50%;
      margin-top: rem(-6);
    }

    &:before {
      left: rem(-36);
      transform: rotate(180deg);
    }

    &:after {
      right: rem(-36);
    }
  }
}

.upload-avatar {
  width: rem(150);
  height: rem(150);
  margin: 0 auto rem(20);
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/uploadAvatar.png');

  &:after {
    content: "点击更换头像";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: rem(32);
    line-height: rem(32);
    background-color: rgba(0, 0, 0, 0.72);
    text-align: center;
    font-size: rem(12);
    z-index: 1000;
  }

  &-uploader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.default-box {
  padding: rem(15);
}

.weui-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}


$weuiActionSheetAndroidBorderRadius: rem(2);
$weuiTextColorDesc: rgba(0, 0, 0, 0.5);
$weuiTextColorTitle: rgba(0, 0, 0, 0.9);
$weuiCellGapV: rem(16);
$weuiBgColorActive: #ECECEC;
$weuiColorWarn: #FA5151;
$weuiCellLineHeight: 1.41176471;

.weui-actionsheet {
  position: fixed;
  left: 0;
  bottom: 0;
  transform: translate(0, 100%);
  backface-visibility: hidden;
  z-index: 5000;
  width: 100%;
  background-color: #EAE7E8;
  //slide up animation
  transition: transform .3s;

  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
}

.weui-actionsheet__title {
  position: relative;
  height: rem(56);
  padding: 0 rem(24);
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: rem(12);
  color: $weuiTextColorDesc;
  line-height: 1.4;
  background: #FFFFFF;

  &:before {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.1);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .weui-actionsheet__title-text {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

.weui-actionsheet__menu {
  color: $weuiTextColorTitle;
  background-color: #FFFFFF;
}

.weui-actionsheet__action {
  margin-top: rem(8);
  background-color: #FFFFFF;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  color: rgba(0, 0, 0, 0.9);
}

.weui-actionsheet__cell {
  position: relative;
  padding: $weuiCellGapV;
  text-align: center;
  font-size: rem(17);
  line-height: $weuiCellLineHeight;

  &:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  &:active {
    background-color: $weuiBgColorActive;
  }

  &:first-child {
    &:before {
      display: none;
    }
  }
}

.weui-actionsheet__cell_warn {
  color: $weuiColorWarn;
}


//android actionSheet
.weui-skin_android {
  .weui-actionsheet {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    //padding: 0 40px;
    width: 274px;
    box-sizing: border-box;
    backface-visibility: hidden;
    background: transparent;
    //slide up animation
    transition: transform .3s;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .weui-actionsheet__action {
    display: none;
  }

  .weui-actionsheet__menu {
    border-radius: $weuiActionSheetAndroidBorderRadius;
    box-shadow: 0 6px 30px 0 rgba(0, 0, 0, .1);
  }

  .weui-actionsheet__cell {
    padding: $weuiCellGapV;
    font-size: 17px;
    line-height: $weuiCellLineHeight;
    color: $weuiTextColorTitle;
    text-align: left;

    &:first-child {
      border-top-left-radius: $weuiActionSheetAndroidBorderRadius;
      border-top-right-radius: $weuiActionSheetAndroidBorderRadius;
    }

    &:last-child {
      border-bottom-left-radius: $weuiActionSheetAndroidBorderRadius;
      border-bottom-right-radius: $weuiActionSheetAndroidBorderRadius;
    }
  }
}

//actionSheet aniamtion
.weui-actionsheet_toggle {
  transform: translate(0, 0);
}

.pay-form {
  .weui-uploader__file {
    float: unset;
  }
  .form-line {
    align-items: center;
  }
  .form-label {
    margin-bottom: 0;
    width: rem(72);
  }

  .form-code {
    margin-left: rem(10);
  }

  .weui-uploader__input-box {
    float: unset;
    margin: 0 auto;
    width: 100%;
    height: rem(320);
  }
}

.real-logo {
  width: rem(133);
  height: rem(133);
  overflow: hidden;
  background-image: url('../images/USDT.png');
  margin: 0 auto;
}

.real-box {
  padding: rem(18) 0;

  .personal-form {
    padding-top: rem(30);
    padding: rem(30) rem(20) 0;
  }
}

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
  &-page {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-rect {
    background-color: #fff;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;

    &2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    &3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

    &4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    &5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
  }
}

@-webkit-keyframes stretchdelay {

  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4)
  }

  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes stretchdelay {

  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.my-check-uploader {
  width: rem(200);
  height: rem(300);
  .weui-uploader__file {
    background-color: transparent;
  }
}

.mining-card {
  margin-top: rem(11);
  margin-bottom: rem(11);
  .card-content  {
    overflow: auto;
  }
  .card-line {
    line-height: rem(20);
    overflow: auto;
  }
}

.recordpassword {
  display: flex;
  align-items: center;
  cursor: pointer;
  &.active {
    color: #e0133c;
    .recordpassword-icon {
      &:after {
        background-color: #e0133c;
      }
    }
  }
  &-icon {
    width: rem(12);
    height: rem(12);
    background-color: #fff;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    margin-right: rem(4);
    &:after {
      content: "";
      position: absolute;
      top: rem(1);
      left: rem(1);
      width: rem(10);
      height: rem(10);
      overflow: hidden;
      border-radius: 50%;
      background-color: #fff;
    }
    &-text {
      font-size: rem(12);
    }
  }
}

.inline-block {
  display: inline-block;
}

.article {
  padding: rem(12);
  font-size: rem(13);
}


@include iphonx {
  .vipup-card {
    margin-bottom: rem(56);
  }
}


.recharge-form {
  .form-line {
    line-height: rem(24);
  }
}

.screenshot {
  width: rem(100);
  height: rem(100);
  background-color: #eee;
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
}


.tax-rate {
  text-align: center;
  &-pic {
    width: 100%;
    height: rem(64);
    background-image: url('../images/real-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: rem(10);
    &.bi2 {
      background-image: url('../images/MCP.png');
    }
  }
  &-price {
    font-size: rem(14);
  }
  &-text {
    font-size: rem(12);
  }
  &-msg {
    font-size: rem(13);
    color: #98989d;
    letter-spacing: rem(2);
  }
}

.mb-0 {
  margin-bottom: 0 !important;
}


.text-md {
  font-size: 14px;
  line-height: 20px;
}

.tax-rate2 {
  padding-bottom: rem(20);
}


.withdraw-cells {
  border-top: rem(1) solid #a9a8c0;
}
.withdraw-cell {
  border-bottom: rem(1) solid #a9a8c0;
  padding: rem(12) rem(16) rem(4) rem(16);
  line-height: rem(20);
  font-size: rem(14);
}


.withdraw-rate {
  padding: rem(30) 0 rem(10);
  .tax-rate-pic {
    background-image: url('../images/USDT.png');
    margin-bottom: rem(20);
  }
}


.inline-form {
  .form-line {
    margin-bottom: rem(16);
    display: flex;
    justify-content: center;
  }
  .form-label {
    margin-bottom: 0;
    min-width: rem(100);
    padding: 0 rem(10);
    line-height: rem(28);
  }
  .form-text {
    margin-bottom: 0;
  }
  .form-msg {
    margin-top: rem(4);
  }
}


// 提现
.withdraw-form {
  .submit-button {
    margin-top: rem(50);
    min-width: rem(136);
    padding: rem(8);
    font-size: rem(14);
    border-radius: reM(4);
  }
}

.withdraw-rate {
  padding: rem(30) 0 rem(10);
  .tax-rate-pic {
    background-image: url('../images/USDT.png');
    margin-bottom: rem(20);
  }
}



.no-card2 {
  display: block;
  text-align: center;
  font-size: rem(20);
  padding: rem(20) rem(10) rem(40);
  &::before {
    content: "";
    display: block;
    width: rem(160);
    height: rem(160);
    margin: 0 auto;
    padding: rem(20);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  &.undata {
    color: #ffcf1b;
    &::before {
      background-image: url('../images/icon-data.png');
    }
  }
}

.form-inline .form-label {
  margin-bottom: 0;
}